<template>
    <div>

        {{ counter | myfilter }}

        <button @click="counter++">点我</button>

        {{ counter }}

        {{ reverse_msg }}

        <ul>
            <li v-for="(item,index) in tlist" :key="index" :class="{on:index%2==0,off:index%2!=0}">
                {{ index }}--{{ item.text }}
            </li>
        </ul>

        {{ msg }}

        <div v-html="msg"></div>

        <h1 v-show="ok">显示</h1>

        <div v-if="type === 'A'">
            A
        </div>

        <div v-else-if="type === 'B'">
            B
        </div>

        <div v-else>
            C
        </div>
    </div>
</template>

<script>
export default {
    //数据定义
    data(){
        return{
            msg:'你好,这是一个变量',
            ok:true,
            type:'C',
            tlist:[{text:'汽车'},{text:'面包'},{text:'鲜花'}],
            counter:0,
        }
    },
    //过滤器
    filters:{
        myfilter:function(value){
            if(value>=1){
                return "已支付"
            }else{
                return '未支付'
            }
        }
    },
    //监听属性
    watch:{
        counter:function(nval,oval){
            console.log('计数器的变化:'+oval+'变成了'+nval)
        }
    },
    //计算属性
    computed:{
        reverse_msg:function(){
            return this.msg.split('').reverse().join('')
        }
    },
    //初始化方法(钩子方法)
    mounted:function(){

    },
    //常用方法(自定义方法)
    methods:{

    },
}
</script>

<style>
.on{background: blueviolet}
.off{background: chartreuse}
</style>